<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .canvas {
        width: 800px;
        height: 500px;
        margin: auto;
        border: 1px solid gold;
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 10px 5px 30px pink;
    }

    .btn-box {
        width: 800px;
        margin: auto;
        height: 100px;
        margin-top: 40px;

    }

    .btn-box button {
        border: none;
        width: 80px;
        height: 40px;
        border: 1px solid pink;
        border-radius: 20px;
        margin-left: 25px;
    }
</style>

<body>
    <div class="canvas">
        <canvas width="800px" height="500px"></canvas>
    </div>
    <div class="btn-box">
        <button class="brush" data-style="brush">画笔</button>
        <button class="linear" data-style="linear">直线</button>
        <button class="rect" data-style="rect">矩形</button>
        <button class="arc" data-style="arc">圆心</button>
        <button class="clear" data-style="clear">清屏</button>
        <button class="erase" data-style="erase">橡皮檫</button>
        <button class="retrue" data-style="retrue">撤销</button><br /><br />
        <input type="color" class="color" />
        <input type="range" class="range" min="1" max="20" value="1" />
    </div>
    <script>
        window.onload = function () {
            var mycanvas = document.querySelector("canvas");
            var ctx = mycanvas.getContext("2d");
            var brush, linear, rects, arc, clear, erase, retrue, color, ranges;
            brush = document.querySelector(".brush");
            linear = document.querySelector(".linear");
            rects = document.querySelector(".rect");
            arc = document.querySelector(".arc");
            clear = document.querySelector(".clear");
            erase = document.querySelector(".erase");
            retrue = document.querySelector(".retrue");
            color = document.querySelector(".color");
            ranges = document.querySelector(".range");
            var imgArr = [];
            var lineW = 1,
                strokeC = "#000000",
                fillC = "#000000";
            var data_style = "brush";
            ranges.onchange = function () {
                lineW = this.value;
            }
         
            color.onchange = function () {
                strokeC = this.value;
                fillC = this.value;
            }
         
            brush.onclick = function () {
                data_style = this.getAttribute("data-style");
            }
           
            linear.onclick = function () {
                data_style = this.getAttribute("data-style");
            }
          
            rects.onclick = function () {
                data_style = this.getAttribute("data-style");
            }
          
            arc.onclick = function () {
                data_style = this.getAttribute("data-style");
            }
          
            var flag = false;
       
            var startX = 0,
                startY = 0,
                endX = 0,
                endY = 0;
            mycanvas.onmousedown = function (e) {
              
                startX = e.layerX;
                startY = e.layerY;
               
                flag = true;
            }
          
            mycanvas.onmousemove = function (e) {
                if (flag) {
                
                    endX = e.layerX;
                    endY = e.layerY;
                    
                    if (data_style == "brush") {
                        
                        ctx.beginPath();
                       
                        ctx.moveTo(startX, startY);
                        ctx.lineTo(endX, endY);
                       
                        ctx.strokeStyle = strokeC;
                        ctx.lineWidth = lineW;
                       
                        ctx.lineCap = "round";
                        ctx.stroke();
                      
                        ctx.closePath();
                        
                        startX = endX;
                        startY = endY;
                    }
                }
            }
          
            mycanvas.onmouseup = function () {
      
                if (data_style == "linear") {
              
                    ctx.beginPath();
                  
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(endX, endY);
                   
                    ctx.strokeStyle = strokeC;
                    ctx.lineWidth = lineW;
                   
                    ctx.lineCap = "round";
                    ctx.stroke();
                   
                    ctx.closePath();
                } else if (data_style == "rect") {
                  
                    ctx.beginPath();
                    
                    ctx.fillStyle = fillC;
                   
                    ctx.fillRect(startX, startY, endX - startX, endY - startY);
                   
                    ctx.closePath();
                } else if (data_style == "arc") {

                   
                    ctx.beginPath();
                    
                    ctx.fillStyle = fillC;
                    ctx.strokeStyle = strokeC;
                   
                    ctx.arc(startX, startY, endX - startX, 0, Math.PI * 2, false);
                    ctx.fill();
                    ctx.stroke();
                  
                    ctx.closePath();
                }
                var imgdata = ctx.getImageData(0, 0, 800, 500);
                imgArr.push(imgdata);
                flag = false;
            }
            mycanvas.onmouseleave = function () {
                flag = false;
            }
          
            clear.onclick = function () {
                ctx.clearRect(0, 0, 800, 500);
            }
           
            erase.onclick = function () {

                strokeC = "#ffffff";
                data_style = "brush";
            }
        
            retrue.onclick = function () {
                if (imgArr.length > 0) {
                    ctx.putImageData(imgArr.pop(), 0, 0);
                }
                console.log(imgArr.length);
            }
        }
    </script>
</body>

</html>